<template>
  <div class="appUpgradeList padding_20">
    <el-select v-model="param.type"
               filterable
               clearable
               class="w-200"
               @change="handleQuery"
               @clear="handleQuery"
               placeholder="请选择APP类型">
      <el-option v-for="(type, index) in typeList"
                 :value="type.code"
                 :label="type.name"
                 :key="index"></el-option>
    </el-select>
    <el-select v-model="param.userType"
               filterable
               clearable
               class="w-200"
               @change="handleQuery"
               @clear="handleQuery"
               placeholder="请选择用户类型">
      <el-option v-for="(userType, index) in userTypeList"
                 :value="userType.code"
                 :label="userType.name"
                 :key="index"></el-option>
    </el-select>
    <el-input v-model="param.name"
              placeholder="请输入名称"
              @clear="handleQuery"
              class="w-200"
              clearable />
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="handleAdd">新 增</el-button>
    <Table :columns="tableCol"
           :data="tableData"
           stripe
           border
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="handleView(row)">详细</span>
        <span v-if="row.publishStatus == 0"
              @click="handlePublish(row)">发布</span>
        <span v-if="row.publishStatus == 1"
              @click="handlePublish(row)">撤回</span>
        <span @click="handleEdit(row)">编辑</span>
        <span @click="handleDel(row)">删除</span>
      </template>
    </Table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'
  import { appMgt } from '@/api/codeName'

  export default {
    name: "appUpgradeList",
    data () {
      return {
        tableCol: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageIndex) * this.page.pageSize + 1);
            }
          },
          {
            title: '名称',
            key: 'name'
          },
          {
            title: '版本名称',
            key: 'versionName'
          },
          {
            title: '版本编号',
            key: 'versionCode'
          },
          {
            title: '发布状态',
            key: 'publishStatus',
            render: (h, params) => {
              let tmp = ''
              this.publishStatusList.forEach(obj => {
                if (obj.code == params.row.publishStatus) {
                  tmp = obj.name
                }
              })
              return h('span', tmp);
            }
          },
          {
            title: 'APP类型',
            key: 'type',
            render: (h, params) => {
              let tmp = ''
              this.typeList.forEach(obj => {
                if (obj.code == params.row.type) {
                  tmp = obj.name
                }
              })
              return h('span', tmp);
            }
          },
          {
            title: '用户类型',
            key: 'userType',
            render: (h, params) => {
              let tmp = ''
              this.userTypeList.forEach(obj => {
                if (obj.code == params.row.userType) {
                  tmp = obj.name
                }
              })
              return h('span', tmp);
            }
          },
          {
            title: '描述',
            key: 'remark',
            render: (h, params) => {
              return h('div', {
                style: {
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                },
                domProps: { title: params.row.remark },
                on: { click: (e) => { e.stopPropagation(); } }
              }, params.row.remark)
            }
          },
          {
            title: '大小',
            key: 'fileSize'
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 150,
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        tableData: [],
        pageTotal: 0,//总条数
        typeList: appMgt.type,
        userTypeList: appMgt.userType,
        publishStatusList: appMgt.publishStatusList,
        param: {
          type: '',
          userType: '',
          name: ''
        }
      }
    },
    mounted () {
      this._getList();
    },
    methods: {
      handleQuery () {
        this.page.pageIndex=0
        this._getList();
      },
      handleView (row) {
        this.$router.push({ name: 'appView', query: { id: row.id } });
      },
      handleEdit (row) {
        this.$router.push({ name: 'appEdit', query: { id: row.id } });
      },
      handlePublish (row) {
        const text = row.publishStatus === 1 ? '撤回' : '发布';
        this.$confirm(`确认${text}？`)
          .then(_ => {
            let publishStatus = 1;
            if (row.publishStatus == publishStatus) {
              publishStatus = 0;
            }
            this.post(this.api.appUpgradePublish.url, {
              id: row.id,
              publishStatus: publishStatus
            }).then(res => {
              if (res.data.code === '200') {
                this.$message.success(`${text}成功!`);
                this._getList();
              }
            })
          })
          .catch(_ => { });
      },
      handleAdd () {
        this.$router.push({ name: 'appAdd' });
      },
      handleDel (row) {
        this.$confirm('确认删除该版本？')
          .then(_ => {
            this.post(this.api.appUpgradeDel.url, {
              id: row.id
            }).then(res => {
              if (res.data.code === '200') {
                this.$message.success('删除成功!');
                this._getList();
              }
            })
          })
          .catch(_ => { });
      },
      _getList () {
        this.post(this.api.appUpgradeList.url, {
          ...this.page, ...this.param
        }).then(res => {
          if (res.data.code === '200') {
            let data = res.data;
            this.tableData = data.object;
            this.pageTotal = data.totalNum;
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page
    }
  }
</script>

<style scoped lang="scss" type="text/scss" rel="stylesheet/scss">
  .appUpgradeList {
  }
</style>
